<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="header-top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>栏目-兼职管理</el-breadcrumb-item>
              </el-breadcrumb>
              <h2 class="title">栏目-兼职管理</h2>
            </div>
            <div class="row">
              <div class="column column1" >

                <el-form :inline="true" :model="formInline"  class="demo-form-inline">
                  
                  <el-form-item label="选择栏目：">
                    <el-select v-model="formInline.status" placeholder="请选择"  @change="tagListChange" >
                      <el-option v-for= "item in programa" :key="item.tagID" :label="item.description" :value="item.tagID" ></el-option>
                      
                    </el-select>
                  </el-form-item>

                </el-form>
                <div class="titleRow"><span>当前栏目下兼职条目</span></div>
                <el-table
                  :data="tableData"
                  border
                  :cell-style="{'text-align':'center'}"
                  :header-cell-style="{
                    'background-color': '#f5f5f5',
                    'color':'#555',
                    'text-align':'center'
                  }"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="100">
                  </el-table-column>
                  
                  <el-table-column
                    prop="listTitle"
                    label="兼职标题">
                  </el-table-column>
                  <el-table-column
                    prop="companyName"
                    label="公司名称">
                  </el-table-column>

                  
                </el-table>
                <el-button type="primary" @click="deletClick" style="margin-top:20px;margin-left:35%">将选中项从栏目中移除</el-button>
              </div>
              <div class="column">

                <el-form :inline="true" :model="formInline1"  class="demo-form-inline">
                  <el-form-item label="标题">
                    <el-input v-model="formInline1.name" placeholder="标题"></el-input>
                  </el-form-item>

                  <el-form-item label="公司">
                    <el-select v-model="formInline1.company" placeholder="请选择" @change="tagListChange1">
                      
                      <el-option v-for= "item in programa1" :key="item.tagID" :label="item.publisherName" :value="item.publisherName" ></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">筛选</el-button>
                  </el-form-item>
                </el-form>
                <div class="titleRow"><span>所有兼职条目</span></div>
                <el-table
                  :data="tableData1"
                  border
                  :cell-style="{'text-align':'center'}"
                  :header-cell-style="{
                    'background-color': '#f5f5f5',
                    'color':'#555',
                    'text-align':'center'
                  }"
                  style="width: 100%"
                  @selection-change="handleSelectionChange1">
                  <el-table-column
                    type="selection"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="listTitle"
                    label="兼职标题">
                  </el-table-column>
                  <el-table-column
                    prop="companyName"
                    label="公司名称">
                  </el-table-column>
                  <el-table-column
                    prop="companyName"
                    label="发布日期">
                  </el-table-column>
  
                  
                </el-table>
                
                <el-button type="primary" @click="rightChangeLeft" style="margin-top:20px;margin-left:35%">将选中项加入左侧栏目</el-button>
                
              </div>
    
            </div>
          </div>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>
import { getCookie,timeChange,getQueryString } from "./until/index";
  function init(){
    this.$ajax.get("admGetJianzhiTagList.ashx?token=" +getCookie("token"))
        .then(res => {
          if (res.data.code === "200") {
            var data = res.data.data;

            this.programa = data.TagList;
            
          } else {
            this.$message.error(res.data.msg );
          }
        })
        .catch(error => {
          console.log(error);
        });
  }
  function init1(){
    this.$ajax.get("admGetPublisherList.ashx?token=" +getCookie("token"))
        .then(res => {
          if (res.data.code === "200") {
            var data = res.data.data;
            this.programa1 = data.userList;
            
            
          } else {
            this.$message.error(res.data.msg );
          }
        })
        .catch(error => {
          console.log(error);
        });
  }
  function rightList(){
    
    this.$ajax.get("admGetJianzhiSelectingList.ashx?token=" +getCookie("token")+'&tagID='+this.val+'&title='+this.formInline1.name+'&publisherName='+this.formInline1.company)
        .then(res => {
          if (res.data.code === "200") {
            var data = res.data.data;
            if( data.JianzhiList.length>0){

              this.tableData1 = data.JianzhiList;
            }else{
              this.$message('暂无数据' );
            }

            
          } else {
            this.$message.error(res.data.msg );
          }
        })
        .catch(error => {
          console.log(error);
        });
  }
 
  function selectList(tagID){
    this.$ajax.get("admGetJianzhiSelectedList.ashx?token=" +getCookie("token")+'&tagID='+tagID)
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          
          if( data.JianzhiList.length>0){

            this.tableData = data.JianzhiList;
          }else{
            this.$message('暂无数据' );
          }
          
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
  function remove(tagID,arryJson){
    this.$ajax.get("admRemoveJianzhiTag.ashx?token=" +getCookie("token")+'&tagID='+tagID+'&jianZhiIDItemList='+arryJson)
      .then(res => {
        
        if (res.data.code === "200") {
          var data = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            onClose:function(){
              window.location.reload()
            }
          });
        } else {
          this.$message.error('移除失败');
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
  function addTag(arryJson){
    this.$ajax.get("admAddJianzhiTag.ashx?token=" +getCookie("token")+'&tagID='+this.val+'&jianZhiIDItemList='+arryJson)
      .then(res => {
        
        if (res.data.code === "200") {
          var data = res.data.data;
          this.$message({
            message: res.data.msg,
            type: 'success',
            onClose:function(){
              window.location.reload()
            }
          });
        } else {
          this.$message.error('添加失败');
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
export default {
  data() {
    return {

      programa:[],
      programa1:[],
      val:'',
      formInline: {
        status:'',  //选择栏目
      },
      formInline1: {
        name: '', //标题
        company:'',  //公司
      },
      tableData: [],
      tableData1: [],
      multipleSelection: [],
      multipleSelection1: []

    };
  },
  created() {
    
    init.call(this)
    init1.call(this)
  },
  methods: {
    onSubmit() {
      
      rightList.call(this)
    },

    deletClick(){//左边 从选项中移除
      if(this.multipleSelection.length>0){

        var tagID = this.multipleSelection[0].tagID
        let arryJson = [];
        for (var index = 0; index < this.multipleSelection.length; index++) {
          
          arryJson.push({JianZhiID:this.multipleSelection[index].jianZhiID})
          
        }
        
        console.log(arryJson)
        this.$confirm('您是否要移除选中的栏目？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          remove.call(this,tagID,JSON.stringify(arryJson))
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
        
      }else{
        this.$message('请选中您要移除的栏目');
      }
        
      
    },
    rightChangeLeft(){//右边 选中移动左边栏目
      if(this.multipleSelection1.length>0){

        var tagID = this.multipleSelection1[0].tagID
        let arryJson = [];
        for (var index = 0; index < this.multipleSelection1.length; index++) {
          
          arryJson.push({JianZhiID:this.multipleSelection1[index].jianZhiID})
          
        }
        
        
        this.$confirm('您是否将选中项加入左侧栏目？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addTag.call(this,JSON.stringify(arryJson))
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
        
      }else{
        this.$message('请选中您要移入左侧的栏目');
      }
    },
   tagListChange(val){ //左边栏目选择值
     this.val = val
     selectList.call(this,val)
   },
   tagListChange1(val){
     
     
   },
    handleSelectionChange(val,column) {
      
      this.multipleSelection = val;
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.water{margin-right: 10px;display: inline-block}
.waterTime{font-size: 14px;color: #606266;padding: 0 12px 0 0;box-sizing: border-box;}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: 100%;
  min-height: 740px
}

.header-top{
  margin: -20px -20px 20px;
  padding: 15px 20px;
  background: #fff;
  
}
.header-top .title{
  margin:15px 0 0;
  font-weight: 600;
  text-align: center;
  font-size: 18px;
}

.row{
  background: #fff;
  padding: 20px 30px;
  text-align: left;
  display: flex;
  
}
.column{flex: 1}
.column1{margin-right: 20px}
.block {
  padding: 20px;
}
.message{
  margin-top: 20px;
}
.titleRow{width: 100%;text-align: center;margin-bottom: 20px}
</style>
  